<template>
    <view class="container">
        <view class="header">
            <view class="search">
                <u-search placeholder="请输入产品" v-model="keyword" :showAction="false" bgColor="#f7f8fa" @search="onRefresh"></u-search>
            </view>
        </view>

        <scroll-view class="list" :scroll-y="true" :scroll-top="top" :lower-threshold="100" :refresher-triggered="Triggered"  :refresher-enabled="true" 
		@refresherrefresh="onRefresh" @scrolltolower="OnBottom" @scroll="OnScroll" :style="{ height: `${height}px` }">
		<navigator :url="`/pages/validate/info?code=${item.query_code}`" class="item" v-for="item in ProductList" :key="item.id">
                <view class="title">
                    {{item.product.name}}
                </view>

                <view class="line"></view>

                <view class="son-list">
                    <view class="son-item">
                        <view class="name">
                            查询次数：
                        </view>
                        <view class="value">
                            {{item.query_num}}
                        </view>
                    </view>

                    <view class="son-item">
                        <view class="name">
                            您查询的防伪码：
                        </view>
                        <view class="value">
                            {{item.query_code}}
                        </view>
                    </view>

                    <view class="son-item">
                        <view class="name">
                            首次查询时间：
                        </view>
                        <view class="value">
                            {{item.query_time_text}}
                        </view>
                    </view>

                    <view class="son-item">
                        <view class="name">
                            二维码：
                        </view>
                        <view class="value">
                            <image
                                src="/static/images/code.png"
                            />
                        </view>
                    </view>
                </view>
			</navigator>
            <u-loadmore :status="status"  marginBottom="40" fontSize="20" lineColor="#1CD29B" dashed line/>
        </scroll-view>
		<!-- 消息提醒 -->
		<u-toast ref="uToast"></u-toast>
    </view>
</template>
<script>
export default{
    data() {
        return {
            Triggered:false,// 下拉刷新状态
            Isfreshing:false,//防止重复刷新
            ProductList:[],
            page:1,
            business:{},
            status:'loadmore',
            keyword:'',
			height: 0, //页面高度
			top: 0,
        }
    },
	onShow()
	{
		//获取本地存储
		let business = uni.getStorageSync('business') ? uni.getStorageSync('business') : {};
		// 判断对象是否为空
		if(Object.getOwnPropertyNames(business).length > 0)
		{
			this.business = business
			this.onRefresh();
		}
		else
		{
			//没有登录
			uni.$u.route({
				type: 'reLaunch',
				url: 'pages/validate/validate'
			})
		}
	},
	onReady()
	{
		//调用uni接口 获取页面的高度
		uni.getSystemInfo(
		{
			success: res =>
			{
				this.height = res.windowHeight;
			},
		});
	},
    methods:{
        scrollTolower()
        {
            
        },
        onRefresh()
        {
            //下拉刷新
            //防止重复下拉刷新
            if (this.Isfreshing) return;
			
			//执行一次下拉刷新
			this.Isfreshing = true;
			
			//判断是否处于下拉刷新中
			if (!this.Triggered) this.Triggered = true; //正在下拉刷新中
			
			this.ProductList = [];
			this.page = 1;
			
			//请求数据
			this.ProductData();
        },
		async ProductData()
		{
			//请求中
			let result = await this.$u.api.productIndex({
				busid: this.business.id,
				page: this.page,
				keyword: this.keyword
			})
			
			if (this.Triggered) this.Triggered = false;
			if (this.Isfreshing) this.Isfreshing = false;
			this.status = "loadmore";
			
			if(result.code == 0)
			{
				//没有更多数据
				this.status = "nomore";
				return false
			}
			
			this.ProductList = this.ProductList.concat(result.data);
			this.page++;
		},
		OnBottom()
		{
			this.ProductData();
		},
		OnScroll(e)
		{
			this.top = e.detail.scrollTop;
		}
    }
}
</script>

<style>
page{
    background-color: #eee;
}

.container{
    width: 95%;
    margin: 0 auto;
}

.header{
    background-color: #fff;
    padding: 10px 0;
    margin-top: 10px;
    border-radius: 10px;
}

.header .search{
    width: 95%;
    margin: 0 auto;
}

.item{
    background:#fff;
    border-radius: 10px;
    overflow:hidden;
    margin-top:10px;
    padding:0 10px 10px;
}

.item .title{
    padding:10px 0 10px 10px;
    font-size: 20px;
}

.item .line{
    width:100%;
    height:1px;
    background:#ebebeb;
    margin:0 auto;
    margin-bottom:10px;
}

.item .son-list .son-item{
    display:flex;
    justify-content:space-between;
    font-size:14px;
    margin-bottom:10px;
}

.item .son-list .son-item .name{
    color:#9b9b9a;
}

.item .son-list .son-item image{
    width: 30px;
    height: 30px;
}
</style>